<template>
  做一个传声筒22
  <nf-text
    ref="refInput"
    v-model="refText"
    v-bind="textProps"
    @input="myInput"
    @clear="myclear"
  >
    <template #suffix>
      测试插槽
    </template>
  </nf-text>
  <el-button @click="setValue">设置</el-button> 
  <el-button @click="setFocus">设置焦点</el-button> 
  <el-button @click="clearText">清空</el-button><br>
  <hr>
  refText：{{refText}}<br>
 
  <hr>
  <nf-pa
    v-model="refText"
    v-bind="textProps2"
  >
    <template #suffix>
      测试插槽
    </template>
  </nf-pa>
 
</template>

<script>
  import {ref, reactive, onMounted, nextTick } from 'vue'
  import { ElRow, ElCol, ElButton, ElInput } from 'element-plus'
  import { Edit, Search } from '@element-plus/icons'
  import { lifecycle } from '/nf-ui-core'
  import NfText from './components/my-text.vue'
  import NfPa from './components/my-props-attrs.vue'
  
</script>

<script setup>
  lifecycle('传声筒页面', true)


  const textProps2 = reactive({
    title: '提示信息',
    colName: 'userName',
    maxLength: 10,
    placeholder: '占位信息55',
    disabled: false,
    'show-word-limit': true
  })

  const refText = ref('')

  const textProps = reactive({
    title: '提示信息',
    colName: 'userName',
    maxlength: 10,
    placeholder: '占位信息22',
    disabled: false,
    'show-word-limit': true,
    // 'suffix-icon': 'el-icon-date',
    'prefix-icon': 'Edit',
    events: {// 传递方法、事件等
      focus: () => {},
      myInput: (info) => {
        console.log('子控件触发了回调事件：', info)
      }
    }
  })

  const refInput = ref(null)

  onMounted(() => {
    console.log('父组件的input', refInput.value)
    refInput.value.$.refs.$ref.focus()
  })
  const setFocus =() => {
    refInput.value.$refs.$ref.focus()
  }
  const clearText = () => {
    refInput.value.$refs.$ref.clear()
  }

  const setValue = () => {
    refText.value = new Date().valueOf()
    textProps.events.focus()
  }

  const myClear = () => {
    console.log('父组件的清空事件')
  }
  const myInput = (val) => {
    console.log('父组件的 input 事件：', val)
  }
</script>